{% extends 'Common/Logger/layout.common.html.twig' %}
    {% block myJs %}
        <script src="/admin/js/jquery-1.10.2.min.js{{ rnd }}"></script>
            <script type="application/javascript" language="JavaScript">
                $(function () {

                    testWebSocket();
                })



                var wsUri ="ws://192.168.0.5:4236";
                var output = $("#Content");

                function init() {

                    testWebSocket();
                }

                function testWebSocket() {
                    websocket = new WebSocket(wsUri);
                    websocket.onopen = function(evt) {
                        onOpen(evt)
                    };
                    websocket.onclose = function(evt) {
                        onClose(evt)
                    };
                    websocket.onmessage = function(evt) {
                        onMessage(evt)
                    };
                    websocket.onerror = function(evt) {
                        onError(evt)
                    };
                }

                function onOpen(evt) {
                    writeToScreen("CONNECTED");
                    doSend("Logger");
                }

                function onClose(evt) {
                    writeToScreen("DISCONNECTED");
                }

                function onMessage(evt) {
                    writeToScreen('<div>'+ evt.data+'</div>');
                    // websocket.close();
                }

                function onError(evt) {
                    writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
                }

                function doSend(message) {
                    writeToScreen("" + message);
                    websocket.send(message);
                }

                function writeToScreen(message) {
                    var pre = document.createElement("p");
                    pre.style.wordWrap = "break-word";
                    pre.innerHTML = message;
                    output.prepend(pre);
                    console.log(message);
                }

            </script>
    {% endblock %}
    {% block myCss %}

    {% endblock %}

{% block body %}
    <body class="body flex-c lh15">
    <div id="Content"></div>
    </body>
{% endblock %}
